<template>
    <div>
        <span class="_before">订单分配</span>
        <el-row>
            <el-col :offset="3" :span="2" class="text-center">经办人</el-col>
            <el-col :span="24"></el-col>
            <el-col :offset="3" :span="2" style="border-top: 1px solid #aaa;margin-top: 5px;">
                <!-- <el-select v-model="userInfo.handleUser" :disabled="props.handledBy" style="padding-top: 5px;">
                    <el-option v-for="(item,index) in userInfo.handleUserList" :key="index" :label="item.handleUserName" :value="item.handleUserId" />
                </el-select> -->
                <span style="display: block;" class="text-center">{{ userInfo.handleUser || '--' }}</span>
            </el-col>
        </el-row>
        <el-row class="marginTop20">
            <el-col :offset="3" :span="2" class="text-center">业务员</el-col>
            <el-col :offset="3" :span="3" class="text-center">操作员</el-col>
            <el-col :offset="3" :span="3" class="text-center">业务编号</el-col>
        </el-row>
        <template v-for="(item,index0) in param.allocation" :key="item.userId">
            <el-row class="marginTop10">
                <el-col :offset="3" :span="2">
                    <el-select v-model="item.businessUser" placeholder="请选择业务员">
                        <el-option v-for="(business,index) in param.userSimpleList" :key="index" :label="business.nickname"
                            :value="business.userId" />
                    </el-select>
                </el-col>
                <el-col :offset="3" :span="3">
                    <el-select v-model="item.operateUsers" multiple collapse-tags placeholder="请选择操作员">
                        <el-option v-for="(operate,index) in param.userSimpleList" :key="index" :label="operate.nickname"
                            :value="operate.userId" />
                    </el-select>
                </el-col>
                <el-col :offset="3" :span="3">
                    <el-input v-model="item.businessNo" placeholder="请输入业务编号"></el-input>
                </el-col>
                <el-col :span="2">
                    <el-row>
                        <el-col :offset="1" :span="6" v-if="param.allocation.length > 1" align="middle">
                            <el-button @click="handleDelete(index0)" icon="Delete" type="danger" size="small" circle plain></el-button>
                        </el-col>
                        <el-col :span="8" v-if="index0 == param.allocation.length - 1" align="middle">
                            <el-button @click="handleAdd" icon="Plus" type="info" size="small" circle plain></el-button>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </template>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onActivated } from 'vue'
import Cookies from "js-cookie";
// 获取操作员列表
import { userSimpleList } from '@/api/user/index'
import { ElMessage } from 'element-plus'

const props = defineProps({
  handledBy:{  // 经办人选项是否禁用
    type: Boolean,
    default: false
  },
  allocation:{
    type:Array,
    default: () => []
  }
})

const param = reactive({
  userSimpleList:[],
  allocation: [{businessUser: '', operateUsers: [], businessNo: ''}]
})

const userInfo = reactive({
  handleUser:'',
  handleUserList:[{"handleUserId":"","handleUserName":""}]
})
onActivated(() => {
    param.allocation = [{businessUser: '', operateUsers: [], businessNo: ''}]
    userInfo.handleUser = JSON.parse(Cookies.get("User-Info"))?.nickname
//   userInfo.handleUserList[0].handleUserId = JSON.parse(Cookies.get("User-Info"))?.id
//   userInfo.handleUserList[0].handleUserName = JSON.parse(Cookies.get("User-Info"))?.nickname
  getUserSimpleList()
})


const getUserSimpleList = (data = {}) => {
  userSimpleList(data).then(res => {  // 业务员 操作员 集合
    param.userSimpleList = res.data || []
  })
}

// 
// 订单分配数据组装 提订单入参allocation属性
const assemblyData = () => {
   if (param.userSimpleList.length < 1)  return ElMessage.warning('未获取到业务员/操作员集合')
        let newArr = []
        param.allocation.forEach((item1:any) => {
            let  newObj = {
                "operateUser":[
                    {"operateUserId":"","operateUserName":""},
                    {"operateUserId":"","operateUserName":""}
                ],
                "businessUserId":"",
                "businessUserName":"",
                "handleUserId":"",
                "handleUserName":"",
                "businessNo":""
            }

            param.userSimpleList.find(item2 =>{
                if (item2.userId == item1.businessUser) {
                    newObj.businessUserId = item2.userId
                    newObj.businessUserName = item2.nickname
                }
            })
            item1.operateUsers.forEach((item3:any, index:number) => {
                param.userSimpleList.find(item4 =>{
                    if (item4.userId == item3) {
                        newObj.operateUser[index].operateUserId = item4.userId
                        newObj.operateUser[index].operateUserName = item4.nickname
                    }
                })
           })

            newObj.businessNo = item1.businessNo
            newObj.handleUserName = userInfo.handleUser
            param.userSimpleList.find(item5 =>{
                if (userInfo.handleUser == item5.nickname) {
                   newObj.handleUserId = item5.userId
                }
            })


            newArr.push(newObj)
        })
        return newArr
}

//删除一组
const handleDelete = (index: any) => {
  param.allocation.splice(index, 1)
}
// 增加一组
const handleAdd = () => {
    if(param.allocation.length < 31){
        const data = param.allocation[param.allocation.length - 1] //新增 默认copy最后一行的数据
    const allocation = JSON.parse(JSON.stringify(data))
    param.allocation.push(allocation)
    }else {
    ElMessage.warning('最多新增30组数据')
    }
  
}


const validateData = () => {
    if(userInfo.handleUser.length > 0) {
        // param.allocation.forEach((item:any) => {
            if (param.allocation[0].businessUser == '') {
                ElMessage.warning('请选择业务员')
                return false
            }else if (param.allocation[0].operateUsers.length < 1) {
                ElMessage.warning('请选择操作员')
                return false
            }else if (param.allocation[0].businessNo == '') {
                ElMessage.warning('请填写业务编号')
                return false
            }else {
                return true
            }
        // })

    }else {
        ElMessage.warning('请选择经办人')
        return false
    }

}

defineExpose({
    // checkHandledBy: () => { return userInfo.handleUser.length > 0 ? true : false }, // 是否已选中经办人
    allocation: assemblyData,
    validateData: validateData
})
</script>

<style lang="scss" scoped>

</style>